<template>
  <div class="fee">
    <div class="list1">
      <h3>缴费列表</h3>
    </div>
    <div class="list2">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="formInline.name"></el-input>
            </el-form-item>
            <el-form-item label="楼栋名称">
              <el-input v-model="formInline.key"></el-input>
            </el-form-item>
            <el-form-item label="房号">
              <el-input v-model="formInline.houseno"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInline.mibile"></el-input>
            </el-form-item>
            <el-form-item label="账期">
              <!-- <el-input v-model="formInline.name"></el-input> -->
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="添加人">
              <el-input v-model="formInline.admin"></el-input>
            </el-form-item>
            <el-form-item label="流水单号">
              <el-input v-model="formInline.orderno"></el-input>
            </el-form-item>
            <el-button type="primary" @click="cha">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="formInline.name"></el-input>
            </el-form-item>
            <el-form-item label="楼栋名称">
              <el-input v-model="formInline.key"></el-input>
            </el-form-item>
            <el-form-item label="房号">
              <el-input v-model="formInline.houseno"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInline.mibile"></el-input>
            </el-form-item>
            <el-form-item label="账期">
              <!-- <el-input v-model="formInline.name"></el-input> -->
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="添加人">
              <el-input v-model="formInline.admin"></el-input>
            </el-form-item>
            <el-form-item label="流水单号">
              <el-input v-model="formInline.orderno"></el-input>
            </el-form-item>
            <el-button type="primary" @click="cha">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="list3">
      <el-row>
        <el-button type="primary" @click="tian" v-if="tableConfig.addButton"
          >添加</el-button
        >
        <el-button type="danger" @click="Alldeles">批量删除</el-button>
      </el-row>
    </div>
    <div class="list4">
      <commontable
        :tableData="tableData"
        :tableColumns="tableColumns"
        :tableConfig="tableConfig"
        @SizeChange="sizeChange"
        @CurrentChange="currentChange"
        @dele="dele"
        @Alldele="Alldele"
        @updata="updata"
      ></commontable>

      <!-- 增加和修改的弹窗 -->
      <fee-dialog
        ref="feeDialog"
        :cost1="cost1"
        :plot1="plot1"
        :title="title"
      ></fee-dialog>
    </div>
  </div>
</template>

<script>
import commontable from '@/components/login/pack/commontable.vue'
import FeeDialog from '@/components/login/content/FeeDialog.vue'
export default {
  components: { commontable, FeeDialog },
  name: 'FeeV',
  data () {
    return {
      activeName: 'first',
      formInline: {
        name: '',
        buildingid: '',
        houseno: '',
        mibile: '',
        admin: '',
        orderno: '',
        region: '',
        key: ''
      },
      value1: '',
      // 表格传的数据
      tableColumns: [
        { prop: 'id', label: 'ID' },
        { prop: 'userName', label: '姓名' },
        { prop: 'building', label: '楼栋名' },
        { prop: 'houseid', label: '房号' },
        { prop: 'mobile', label: '联系方式' },
        { prop: 'type', label: '缴费类型' },
        { prop: 'enddate', label: '账期' },
        { prop: 'price', label: '应缴金额(元)' },
        { prop: 'begindate', label: '导入时间' },
        { prop: 'admin', label: '添加者' },
        { prop: 'state', label: '状态' }
      ],
      cost1: [
        { id: '1', name: '物业费' },
        { id: '2', name: '垃圾处理费' }
      ],
      plot1: [],
      tableConfig: {
        // 复选框 true和false控制 显示与隐藏
        selection: true,
        // 按钮是否有权限
        addButton: true,
        editButton: true,
        delButton: true,
        // 分页是否显示
        isPagination: true,
        total: 0
      },
      // 数据
      tableData: [],
      // 分页
      config: {
        page: 1,
        psize: 5
      },
      ids: [],
      title: 'add'
    }
  },
  // 页面一打开获取数据
  created () {
    this.getFeeList()
    const a = this.$auth.Auth.btns('费用')
    console.log(a)
    this.tableConfig.addButton = this.$auth.Auth.btn(a, '添加')
    this.tableConfig.delButton = this.$auth.Auth.btn(a, '删除')

    // console.log(this.$auth.Auth.btns('缴费'))
    this.cost()
    this.plot()
  },
  methods: {
    // 修改数据
    updata (title, data) {
      this.$refs.feeDialog.dialogVisible = true
      this.title = 'deit'
    },

    // 获取所有选中的id
    Alldele (val) {
      // console.log(val)
      this.ids = val
    },
    // 批量删除
    Alldeles () {
      const data = {
        ids: this.ids
      }
      this.$axios
        .post('http://estate.eshareedu.cn/estate/api/fee/deleteall', data, {
          headers: {
            Authorization: this.$store.state.token
          }
        })
        .then((res) => {
          // console.log(res)
          if (res.data.errCode === 10000) {
            this.$confirm('请问您确定要删除吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                this.getFeeList()
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
          }
        })
    },
    // 删除
    dele (id) {
      // console.log(id)
      this.$axios
        .get('http://estate.eshareedu.cn/estate/api/fee/delete', {
          params: {
            id
          },
          headers: {
            Authorization: this.$store.state.token
          }
        })
        .then((res) => {
          if (res.data.errCode === 10000) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              // 点击确定要做的事情
              .then(() => {
                this.getFeeList()
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
          }
        })
    },
    // 单个删除
    // dele (val) {
    //   console.log(val)
    //   // 1提示
    //   this.$confirm('请问您确定要删除吗', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(async () => {
    //     // 点击确定要做的事情
    //     // 进行网络请求
    //     const data = { id: val }
    //     const res = await this.$api.Fee.reqFeeDelete(data)
    //     console.log(res)
    //     if (res.data.errCode === 10000) {
    //       // 重新调用一下列表
    //       this.getFeeList()
    //     }
    //   }).catch(() => {
    //     // 点击取消要做的事情
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // },
    async cost () {
      // 添加 缴费类型
      const sss = await this.$api.Fee.reqFeeType()
      console.log(sss)
    },
    // 添加 小区
    async plot () {
      const sss = await this.$api.Fee.reqFeePlot()
      console.log(sss)
      this.plot1 = sss.data.data.list
    },
    // 查询
    cha () {
      this.config = { ...this.config, ...this.formInline }
      this.getFeeList()
      console.log(this.config)
    },
    // 添加
    tian () {
      this.$refs.feeDialog.dialogVisible = true
      this.title = 'add'
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 请求当前页数据
    async getFeeList (data) {
      console.log(this.config)
      // const res = await this.$api.Fee.reqFeeList(this.config)
      // console.log(res)
      // this.tableData = res.data.data.list
      // this.tableConfig.total = res.data.data.counts

      this.$axios({
        method: 'get',
        url: 'http://estate.eshareedu.cn/estate/api/fee/list',
        headers: {
          Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dpbk5hbWUiOiJxcXEiLCJ1c2VyVHlwZSI6IkFETUlOIiwiZXhwIjoxNjY2MTczNzgwfQ.g65QRl7yhOTUEEp-puFL48hanEL48eL5j4-hBVRfxAc'
        }
      })
        .then((res) => {
          console.log(res)
        })
      // .get('http://estate.eshareedu.cn/estate/api/fee/list', data, {
      //   header: {
      //     Authorization:
      //       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dpbk5hbWUiOiJxcXEiLCJ1c2VyVHlwZSI6IkFETUlOIiwiZXhwIjoxNjY2MTczNzgwfQ.g65QRl7yhOTUEEp-puFL48hanEL48eL5j4-hBVRfxAc'
      //   }
      // })
    },

    // this.$axios.get('http://estate.eshareedu.cn/estate/api/building/delete', {
    //   params: { id: data.id },
    //   headers: {
    //     Authorization: this.token
    //   }
    // })

    // 每页显示多少条数据
    sizeChange (val) {
      this.config.psize = val
      this.getFeeList()
    },
    // 页码发生变化
    currentChange (val) {
      this.config.page = val
      this.getFeeList()
    }
  }
}
</script>
<style lang="less" scoped>
.fee {
  padding: 0 !important;
}
.list1 {
  width: 100%;
  height: 49px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  h1 {
    color: #427ff4;
  }
}
.el-input {
  width: 120px;
}
</style>
